<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>添加评论</button>
    <ul>
        <li>点击弹框</li>
        <li>点击弹框</li>
        <li>点击弹框</li>
        <li>点击弹框</li>
        <li>点击弹框</li>
    </ul>
    <script>
        //事件委托核心原理 给父节点添加侦听器，利用事件冒泡影响每一个子节点

        var ul = document.querySelector('ul');

        var btn = document.querySelector('button');

        var lis = document.querySelectorAll('li');



        for (let i = 0; i < ul.children.length; i++) {
            ul.children[i].setAttribute('data-index', i)
        }
        btn.addEventListener('click', function() {
            var liss = document.createElement('li');
            liss.innerHTML = '点击弹框';
            ul.appendChild(liss);

            for (let i = 0; i < ul.children.length; i++) {
                ul.children[i].setAttribute('data-index', i)
            }
        });


        ul.addEventListener('click', function(e) {
            console.log(e.target.dataset.index);
            // alert('弹框');
            for (var i = 0; i < ul.children.length; i++) {
                ul.children[i].style.backgroundColor = '';
            } //排他思想
            e.target.style.backgroundColor = 'pink';
        })



        // for (let i = 0; i < lis.length; i++) {
        //     lis[i].addEventListener('click', function() {
        //         for (let j = 0; j < lis.length; j++) {
        //             lis[j].style.backgroundColor = '';
        //         } //排他思想
        //         lis[i].style.backgroundColor = 'pink';
        //     })
        // }
    </script>
</body>

</html>